Android Tips #37 RelativeLayout の子の View の width を 50% にする

Android Tips #37 RelativeLayout の子の View の width を 50% にする

Clock Icon2013.01.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

RelativeLayout ではパーセント指定的なことができない

RelativeLayout は View を相対的に配置するレイアウトです。View と View の位置関係をプロパティで指定してレイアウトします。 レイアウトを相対的に配置することで、さまざまな画面サイズでも良い感じにレイアウトすることができます。最新の ADT でもAndroid プロジェクトを作成すると自動生成される Activity のレイアウトに使われています。柔軟性が高いことから最も使用頻度の高いレイアウトと言えるでしょう。
しかしこの RelativeLayout では LinearLayout でよく使う android:layout_weight がないのでパーセント指定的なことができません。さて、そういったときにはどのように実装すれば良いでしょう?実装時のメモとして残しておきたいと思います。

android:alignLeft と android:alignRight を活用する

結論から言うと android:alignLeft android:alignRight で実現することが可能です!これらは指定した View を起点にレイアウトしてくれるプロパティです。以下のように実装します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <!-- 空の View -->
    <View 
        android:id="@+id/center_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent="true"
        />
    
    <!-- Left -->
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignRight="@+id/center_view"
        android:text="Left"
        />
    
    <!-- Right -->
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_alignLeft="@+id/center_view"
        android:text="Right"
        />

</RelativeLayout>

ポイントは空の View を中心に置くところです。android:layout_width と android:layout_height は 0dp なので実際には表示されません。左側に置く View の場合 android:layout_alignRight に中心に置いた View の id を指定し android:layout_alignParentLeft を true にして親から見て左寄せにします。すると親の左端から中心までが width になります。つまり 50% になります。またこのようにレイアウトするときは android:layout_width は指定する必要がなくなるので、余計な計算が走らないように 0dp にしておきます。

relative_layout01

左側だけ表示する

もちろん左側の View だけ配置することもできます。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    
    <View 
        android:id="@+id/center_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent="true"
        />
    
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignRight="@+id/center_view"
        android:text="Left"
        />

</RelativeLayout>

relative_layout02

height を 50% にする

以下のようにすると height を 50% にすることもできます。横が縦になっただけですね。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    
    <View 
        android:id="@+id/center_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent="true"
        />
    
    <Button 
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:layout_alignBottom="@+id/center_view"
        android:text="Top"
        />
    
    <Button 
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_alignTop="@+id/center_view"
        android:text="Bottom"
        />

</RelativeLayout>

relative_layout03

まとめ

今回紹介したのは RelativeLayout だけを使って width を 50% でレイアウトする方法でした。もちろん LinearLayout をネストして android:layout_weight で指定する方法もありますが、パフォーマンス面も考えるとネストは少ないほうがいいですよね。今回の実装はあくまで半分ずつにしか表示できないので、実際にはパーセント指定のようにはできないのでご了承を。他に良さそうな実装方法があればぜひご教示ください!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.